//轮播图
//需求分析:
//	每隔3s进行图片轮播
var time;//定义定时器
//封装定时器
function autoTime(){
	time = setInterval(function(){
		nextIndex++;
		if(nextIndex > $('.carousel>li').length-1){
			nextIndex = 0;
		}
		autoImg();
		index = nextIndex;
	},3000)
}
//用定时器,先清定时器
clearInterval(time);
autoTime();
//需求分析:
//	鼠标移入,左按钮和右按钮显示,停止定时器
//	鼠标移出,左按钮和有按钮隐藏,定时器继续工作
$('.carousel').mouseenter(function(){
	$('.left-btn').show(0,'linear');
	$('.right-btn').show(0,'linear');
	clearInterval(time);
}).mouseleave(function(){
	$('.left-btn').hide(0,'linear');
	$('.right-btn').hide(0,'linear');
	clearInterval(time)
	autoTime();
})
//需求分析:
//	1.点击right-btn按钮,显示下一张图片下面对应的小圆点也高亮
//	2.点击left-btn按钮,显示下一张图片下面对应的小圆点也高亮
var index = 0;//用index来记录图片的索引
var nextIndex = 0;//记录下一张图片的索引
$('.right-btn').click(function(){
	nextIndex++;
	if(nextIndex > $('.carousel>li').length-1){
		nextIndex = 0;
	}
	autoImg();
	clearInterval(time);
	autoTime();
	index = nextIndex;
})
$('.left-btn').click(function(){
	nextIndex--;
	if(nextIndex < 0){
		nextIndex = $('.carousel>li').length-1;
	}	
	autoImg();
	clearInterval(time);
	autoTime();
	index = nextIndex;
})
//封装图片轮播函数
function autoImg(){
	$('.carousel>li').eq(index).fadeOut(500);
	$('.carousel>li').eq(nextIndex).fadeIn(500);
	$('.banner-dot a').eq(nextIndex).addClass('first').siblings().removeClass('first');
}
//需求分析:
//	点击小圆点,根据相应的小圆点下标显示相应的图片
//	如果点的小圆点跟上一个小圆点一样,则不发生任何效果
$('.banner-dot a').click(function(){
	if(nextIndex == $(this).index()){
		clearInterval(time);
		return;
	}
	nextIndex = $(this).index();
	autoImg();
	clearInterval(time);
	autoTime();
	index = nextIndex;
})

